<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-09-01
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2024-03-05
 * @FilePath: /element-admin/src/views/FoodCalDinnerTab.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="Cust-Dinner-page">
    <!--顶部搜索栏-->
    <div class="col-md-12">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-form-item>
          <el-button type="danger" plain @click="handleChgEditStatus" size="big" >编辑</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" plain @click="handleFetch" size="small" >刷新</el-button>
        </el-form-item>
        <el-form-item v-if="editStatusFlg == true">
          <!--  <el-button type="primary" plain @click="handleSave" size="small">保存</el-button>-->
          <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="确定覆盖原数据，此操作不可恢复？"
              @confirm="handleSave"
          >
            <el-button type="success" plain slot="reference" size="small" >保存</el-button>
          </el-popconfirm>
        </el-form-item>
      </el-form>
    </div>
    <!--中部数据表格栏-->
    <div class="col-md-12" v-if="editStatusFlg" style="width: 1600px">
      <div class="mainTabTable">
        <span v-if="false">{{ FoodCalDayList }}</span>
        <el-table :data="FoodCalDayList"
                  :cell-style="{padding:'5px'}"
                  :key="isIndex" v-loading="isLoading" border
                  stripe row-key="id">
          <el-table-column v-if="isIndex == 1" type="index" label="天数" width="75" fixed></el-table-column>
          <!-- --------------------------------------------------------------------------------------------- 早餐 -->
          <el-table-column prop="list" label="早餐">
            <template v-slot="scope">
              <span v-for="item in scope.row.list.zaocan.protein" v-bind:key="item.name">
                <el-col :span="8"> <el-input v-model="item.name" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8"> <el-input v-model="item.key" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8">
                  <el-select v-model="item.catalog" placeholder="分类" size="small" @change="(val) => handleSelectFetch(0, val, item)">
                  <el-option label="请选择分类" value=-1></el-option>
                  <el-option :label="item.label" :value=item.value :data="item" v-for="item in food_catalog_opts" v-bind:key="item.value"></el-option>
                  </el-select>
                </el-col>
              </span>
              <span v-for="item in scope.row.list.zaocan.vitamin" v-bind:key="item.name">
                <el-col :span="8"> <el-input v-model="item.name" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8"> <el-input v-model="item.key" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8">
                  <el-select v-model="item.catalog" placeholder="分类" size="small" @change="(val) => handleSelectFetch(0, val, item)">
                  <el-option label="请选择分类" value=-1></el-option>
                  <el-option :label="item.label" :value=item.value :data="item" v-for="item in food_catalog_opts" v-bind:key="item.value"></el-option>
                  </el-select>
                </el-col>
              </span>
              <span v-for="item in scope.row.list.zaocan.carbonWater" v-bind:key="item.name">
                <el-col :span="8"> <el-input v-model="item.name" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8"> <el-input v-model="item.key" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8">
                  <el-select v-model="item.catalog" placeholder="分类" size="small" @change="(val) => handleSelectFetch(0, val, item)">
                    <el-option label="请选择分类" value=-1></el-option>
                    <el-option :label="item.label" :value=item.value :data="item" v-for="item in food_catalog_opts" v-bind:key="item.value"></el-option>
                  </el-select>
                </el-col>
              </span>
              <span v-for="item in scope.row.list.zaocan.fat" v-bind:key="item.name">
                <el-col :span="8"> <el-input v-model="item.name" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8"> <el-input v-model="item.key" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8">
                  <el-select v-model="item.catalog" placeholder="分类" size="small" @change="(val) => handleSelectFetch(0, val, item)">
                    <el-option label="请选择分类" value=-1></el-option>
                    <el-option :label="item.label" :value=item.value :data="item" v-for="item in food_catalog_opts" v-bind:key="item.value"></el-option>
                  </el-select>
                </el-col>
              </span>
            </template>
          </el-table-column>
          <!-- --------------------------------------------------------------------------------------------- 午餐 -->
          <el-table-column prop="list" label="午餐">
            <template v-slot="scope">
              <span v-for="item in scope.row.list.wucan.protein" v-bind:key="item.name">
                <el-col :span="8"> <el-input v-model="item.name" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8"> <el-input v-model="item.key" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8">
                  <el-select v-model="item.catalog" placeholder="分类" size="small" @change="(val) => handleSelectFetch(0, val, item)">
                    <el-option label="请选择分类" value=-1></el-option>
                    <el-option :label="item.label" :value=item.value :data="item" v-for="item in food_catalog_opts" v-bind:key="item.value"></el-option>
                  </el-select>
                </el-col>
              </span>
              <span v-for="item in scope.row.list.wucan.vitamin" v-bind:key="item.name">
                <el-col :span="8"> <el-input v-model="item.name" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8"> <el-input v-model="item.key" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8">
                  <el-select v-model="item.catalog" placeholder="分类" size="small" @change="(val) => handleSelectFetch(0, val, item)">
                    <el-option label="请选择分类" value=-1></el-option>
                    <el-option :label="item.label" :value=item.value :data="item" v-for="item in food_catalog_opts" v-bind:key="item.value"></el-option>
                  </el-select>
                </el-col>
              </span>
              <span v-for="item in scope.row.list.wucan.carbonWater" v-bind:key="item.name">
                <el-col :span="8"> <el-input v-model="item.name" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8"> <el-input v-model="item.key" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8">
                  <el-select v-model="item.catalog" placeholder="分类" size="small" @change="(val) => handleSelectFetch(0, val, item)">
                    <el-option label="请选择分类" value=-1></el-option>
                    <el-option :label="item.label" :value=item.value :data="item" v-for="item in food_catalog_opts" v-bind:key="item.value"></el-option>
                  </el-select>
                </el-col>
              </span>
              <span v-for="item in scope.row.list.wucan.fat" v-bind:key="item.name">
                <el-col :span="8"> <el-input v-model="item.name" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8"> <el-input v-model="item.key" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8">
                  <el-select v-model="item.catalog" placeholder="分类" size="small"
                             @change="(val) => handleSelectFetch(0, val, item)">
                    <el-option label="请选择分类" value=-1></el-option>
                    <el-option :label="item.label" :value=item.value :data="item" v-for="item in food_catalog_opts"
                               v-bind:key="item.value"></el-option>
                  </el-select>
                </el-col>
              </span>
            </template>
          </el-table-column>
          <!-- --------------------------------------------------------------------------------------------- 晚餐 -->
          <el-table-column prop="list" label="晚餐">
            <template v-slot="scope">
              <span v-for="item in scope.row.list.wancan.protein" v-bind:key="item.name">
                <el-col :span="8"> <el-input v-model="item.name" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8"> <el-input v-model="item.key" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8">
                  <el-select v-model="item.catalog" placeholder="分类" size="small"
                             @change="(val) => handleSelectFetch(0, val, item)">
                    <el-option label="请选择分类" value=-1></el-option>
                    <el-option :label="item.label" :value=item.value :data="item" v-for="item in food_catalog_opts"
                               v-bind:key="item.value"></el-option>
                  </el-select>
                </el-col>
              </span>
              <span v-for="item in scope.row.list.wancan.vitamin" v-bind:key="item.name">
                <el-col :span="8"> <el-input v-model="item.name" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8"> <el-input v-model="item.key" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8">
                  <el-select v-model="item.catalog" placeholder="分类" size="small"
                             @change="(val) => handleSelectFetch(0, val, item)">
                    <el-option label="请选择分类" value=-1></el-option>
                    <el-option :label="item.label" :value=item.value :data="item" v-for="item in food_catalog_opts"
                               v-bind:key="item.value"></el-option>
                  </el-select>
                </el-col>
              </span>
              <span v-for="item in scope.row.list.wancan.carbonWater" v-bind:key="item.name">
                <el-col :span="8"> <el-input v-model="item.name" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8"> <el-input v-model="item.key" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8">
                  <el-select v-model="item.catalog" placeholder="分类" size="small"
                             @change="(val) => handleSelectFetch(0, val, item)">
                    <el-option label="请选择分类" value=-1></el-option>
                    <el-option :label="item.label" :value=item.value :data="item" v-for="item in food_catalog_opts"
                               v-bind:key="item.value"></el-option>
                  </el-select>
                </el-col>
              </span>
              <span v-for="item in scope.row.list.wancan.fat" v-bind:key="item.name">
                <el-col :span="8"> <el-input v-model="item.name" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8"> <el-input v-model="item.key" maxlength="16" clearable size="mini"/> </el-col>
                <el-col :span="8">
                  <el-select v-model="item.catalog" placeholder="分类" size="small"
                             @change="(val) => handleSelectFetch(0, val, item)">
                    <el-option label="请选择分类" value=-1></el-option>
                    <el-option :label="item.label" :value=item.value :data="item" v-for="item in food_catalog_opts"
                               v-bind:key="item.value"></el-option>
                  </el-select>
                </el-col>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="col-md-12" v-else>
      <div class="mainTabTable" >
        <span v-if="false">{{ FoodCalDayList }}</span>
        <div v-for="(item, idx) in FoodCalDayList" v-bind:key="idx" style="margin-bottom: 15px">
          <el-card>
            <div slot="header" class="clearfix">
              <span>第 {{idx+1}} 餐</span>
            </div>
            <span v-if="false">{{item}}</span>
            <el-col :span="13">
            <el-card style="margin-bottom: 15px">
              <div slot="header" class="clearfix">
                <span>早餐</span>
              </div>
              <div class="col-md-6 text item" >
              <span v-for="item in item.list.zaocan.protein" v-bind:key="item.name">
                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">
                  <el-descriptions-item label="餐名" ><span>{{ item.name }}</span></el-descriptions-item>
                  <el-descriptions-item label="食材" ><span>{{ item.key }}</span></el-descriptions-item>
                  <el-descriptions-item label="分类" ><span>{{ item.catalog }}</span></el-descriptions-item>
                </el-descriptions>
              </span>
                <span v-for="item in item.list.zaocan.vitamin" v-bind:key="item.name">
                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">
                  <el-descriptions-item label="餐名" ><span>{{ item.name }}</span></el-descriptions-item>
                  <el-descriptions-item label="食材" ><span>{{ item.key }}</span></el-descriptions-item>
                  <el-descriptions-item label="分类" ><span>{{ item.catalog }}</span></el-descriptions-item>
                </el-descriptions>
              </span>
                <span v-for="item in item.list.zaocan.carbonWater" v-bind:key="item.name">
                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">
                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                </el-descriptions>
              </span>
                <span v-for="item in item.list.zaocan.fat" v-bind:key="item.name">
                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">
                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                </el-descriptions>
              </span>
              </div>
            </el-card></el-col>
            <!-- 午餐 -->
            <el-col :span="13">
            <el-card style="margin-bottom: 15px">
              <div slot="header" class="clearfix">
                <span>午餐</span>
              </div>
              <div class="col-md-6 text item" >
              <span v-for="item in item.list.wucan.protein" v-bind:key="item.name">
                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">
                  <el-descriptions-item label="餐名" ><span>{{ item.name }}</span></el-descriptions-item>
                  <el-descriptions-item label="食材" ><span>{{ item.key }}</span></el-descriptions-item>
                  <el-descriptions-item label="分类" ><span>{{ item.catalog }}</span></el-descriptions-item>
                </el-descriptions>
              </span>
                <span v-for="item in item.list.wucan.vitamin" v-bind:key="item.name">
                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">
                  <el-descriptions-item label="餐名" ><span>{{ item.name }}</span></el-descriptions-item>
                  <el-descriptions-item label="食材" ><span>{{ item.key }}</span></el-descriptions-item>
                  <el-descriptions-item label="分类" ><span>{{ item.catalog }}</span></el-descriptions-item>
                </el-descriptions>
              </span>
                <span v-for="item in item.list.wucan.carbonWater" v-bind:key="item.name">
                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">
                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                </el-descriptions>
              </span>
                <span v-for="item in item.list.wucan.fat" v-bind:key="item.name">
                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">
                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                </el-descriptions>
              </span>
              </div>
            </el-card></el-col>
            <!-- 晚餐 -->
            <el-col :span="13">
            <el-card style="margin-bottom: 15px">
              <div slot="header" class="clearfix">
                <span>晚餐</span>
              </div>
              <div class="col-md-6 text item" >
              <span v-for="item in item.list.wancan.protein" v-bind:key="item.name">
                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">
                  <el-descriptions-item label="餐名" ><span>{{ item.name }}</span></el-descriptions-item>
                  <el-descriptions-item label="食材" ><span>{{ item.key }}</span></el-descriptions-item>
                  <el-descriptions-item label="分类" ><span>{{ item.catalog }}</span></el-descriptions-item>
                </el-descriptions>
              </span>
                <span v-for="item in item.list.wancan.vitamin" v-bind:key="item.name">
                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">
                  <el-descriptions-item label="餐名" ><span>{{ item.name }}</span></el-descriptions-item>
                  <el-descriptions-item label="食材" ><span>{{ item.key }}</span></el-descriptions-item>
                  <el-descriptions-item label="分类" ><span>{{ item.catalog }}</span></el-descriptions-item>
                </el-descriptions>
              </span>
                <span v-for="item in item.list.wancan.carbonWater" v-bind:key="item.name">
                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">
                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                </el-descriptions>
              </span>
                <span v-for="item in item.list.wancan.fat" v-bind:key="item.name">
                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">
                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>
                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>
                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>
                </el-descriptions>
              </span>
              </div>
            </el-card></el-col>
          </el-card>
        </div>
<!--        <el-table :data="FoodCalDayList" :cell-style="{padding:'5px'}" :key="isIndex" v-loading="isLoading" border-->
<!--                  stripe row-key="id">-->
<!--          <el-table-column v-if="isIndex == 1" type="index" label="天数" width="75" fixed></el-table-column>-->
<!--          &lt;!&ndash; -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; 早餐 &ndash;&gt;-->
<!--          <el-table-column prop="list" label="早餐">-->
<!--            <template v-slot="scope">-->
<!--              <span v-for="item in scope.row.list.zaocan.protein" v-bind:key="item.name">-->
<!--                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">-->
<!--                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>-->
<!--                </el-descriptions>-->
<!--              </span>-->
<!--              <span v-for="item in scope.row.list.zaocan.vitamin" v-bind:key="item.name">-->
<!--                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">-->
<!--                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>-->
<!--                </el-descriptions>-->
<!--              </span>-->
<!--              <span v-for="item in scope.row.list.zaocan.carbonWater" v-bind:key="item.name">-->
<!--                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">-->
<!--                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>-->
<!--                </el-descriptions>-->
<!--              </span>-->
<!--              <span v-for="item in scope.row.list.zaocan.fat" v-bind:key="item.name">-->
<!--                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">-->
<!--                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>-->
<!--                </el-descriptions>-->
<!--              </span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          &lt;!&ndash; -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; 午餐 &ndash;&gt;-->
<!--          <el-table-column prop="list" label="午餐">-->
<!--            <template v-slot="scope">-->
<!--              <span v-for="item in scope.row.list.wucan.protein" v-bind:key="item.name">-->
<!--                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">-->
<!--                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>-->
<!--                </el-descriptions>-->
<!--              </span>-->
<!--              <span v-for="item in scope.row.list.wucan.vitamin" v-bind:key="item.name">-->
<!--                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">-->
<!--                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>-->
<!--                </el-descriptions>-->
<!--              </span>-->
<!--              <span v-for="item in scope.row.list.wucan.carbonWater" v-bind:key="item.name">-->
<!--                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">-->
<!--                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>-->
<!--                </el-descriptions>-->
<!--              </span>-->
<!--              <span v-for="item in scope.row.list.wucan.fat" v-bind:key="item.name">-->
<!--                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">-->
<!--                  <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>-->
<!--                  <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>-->
<!--                </el-descriptions>-->
<!--              </span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          &lt;!&ndash; -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45; 晚餐 &ndash;&gt;-->
<!--          <el-table-column prop="list" label="晚餐">-->
<!--            <template v-slot="scope">-->
<!--              <span v-for="item in scope.row.list.wancan.protein" v-bind:key="item.name">-->
<!--                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">-->
<!--                <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>-->
<!--                <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>-->
<!--                <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>-->
<!--                </el-descriptions>-->
<!--              </span>-->
<!--              <span v-for="item in scope.row.list.wancan.vitamin" v-bind:key="item.name">-->
<!--                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">-->
<!--                <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>-->
<!--                <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>-->
<!--                <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>-->
<!--                </el-descriptions>-->
<!--              </span>-->
<!--              <span v-for="item in scope.row.list.wancan.carbonWater" v-bind:key="item.name">-->
<!--                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">-->
<!--                <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>-->
<!--                <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>-->
<!--                <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>-->
<!--                </el-descriptions>-->
<!--              </span>-->
<!--              <span v-for="item in scope.row.list.wancan.fat" v-bind:key="item.name">-->
<!--                <el-descriptions :column="4" border class="margin-top" size="small" :label-style="LS" :content-style="CS">-->
<!--                <el-descriptions-item label="餐名"><span>{{ item.name }}</span></el-descriptions-item>-->
<!--                <el-descriptions-item label="食材"><span>{{ item.key }}</span></el-descriptions-item>-->
<!--                <el-descriptions-item label="分类"><span>{{ item.catalog }}</span></el-descriptions-item>-->
<!--                </el-descriptions>-->
<!--              </span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
      </div>
    </div>
  </div>
</template>
<script>
import {chooseOptData, loadCustDinner, updateCustDinner} from "@/api/CustDinnerApi";

export default {
  name: "CustDinnerMap",
  components: {},
  data() {
    return {
      LS:{
        "text-align": "left",
        "min-width": "120px",
        "word-break": "keep-all"
      },
      CS:{
        "min-width": "120px",
        "max-width":"300px",
        "word-break": "break-all"
      },
      isIndex: 1,
      isLoading: false,
      exDis: false,
      editStatusFlg: false,
      query: {
        key: '',
        days: 1,
        sameFoodFlg: "1",
        pageSize: 20,
        pageNum: 1,
      },
      tableHeight: 650,
      FoodCalDayList: [],
      food_catalog_opts: [
        {label: "蛋白质", value: "蛋白质", key: 0},
        {label: "碳水化合", value: "碳水化合", key: 1},
        {label: "脂肪", value: "脂肪", key: 2},
        {label: "维生素", value: "维生素", key: 3},
      ],
      food_key_opts: [],
      food_name_opts: [],
    }
  },
  props: {
    drawId: {type: String, default: ''}
  },
  computed: {},
  methods: {
    init_obj() {
      return {
        FoodCalDayList: [],
      }
    },
    handle_init() {
      this.init_obj();
    },
    handleFetch() {
      this.init_obj();
      this.isLoading = true;
      loadCustDinner(this.query).then(res => {
        if (res.code == 200) {
          this.isLoading = false;
          this.exDis = false;
          this.FoodCalDayList = res.data;
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    handleChgEditStatus() {
      if (this.editStatusFlg) {
        this.editStatusFlg = false;
      } else {
        this.editStatusFlg = true;
      }
    },
    async handleSave() {
      await updateCustDinner({data: this.FoodCalDayList}).then(res => {
        if (res.code == 200) {
          this.isLoading = false;
          this.exDis = false;
          this.FoodCalDayList = res.data.list;
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
          this.handleFetch();
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    handleSelectFetch(flg, key, item) {
      chooseOptData({"flg": flg, "key": key}).then(res => {
        if (res["code"] == 200) {
          if (flg == 0) {
            item.key = "";
            this.food_key_opts = res["data"];
          } else if (flg == 1) {
            item.name = "";
            this.food_name_opts = res["data"];
          }
        } else {
          this.$notify({title: '执行失败', message: '数据操作异常' + res["message"], type: 'error', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    }
  },
  created() {
    this.handle_init();
  },
  mounted() {
  },
  watch: {
    drawId: {
      immediate: true,
      handler(drawId) {
        if (drawId.length > 0) {
          this.handle_init();
        }
      }
    }
  }
}
</script>
<style scoped>
.mainTabTable {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /*height: 1450px*/
}

</style>